<template>
	<view class="forget-password-container" :style="{ paddingTop: pdTop + 'rpx' }">
		<!-- 头部导航 -->
		<view class="header-nav">
			<view class="nav-back" @click="goBack">
				<u-icon name="arrow-left" color="#333" size="20"></u-icon>
			</view>
		</view>
		
		<!-- 标题区域 -->
		<view class="title-section">
			<text class="title">忘记密码</text>
			<text class="subtitle">输入注册手机号码可重置密码</text>
		</view>
		
		<!-- 表单区域 -->
		<view class="form-container">
			<!-- 手机号输入框 -->
			<view class="input-item">
                <span class="iconfont input-icon icon-phone"></span>
				<input 
					class="input-field" 
					type="text" 
					placeholder="请输入手机号"
					v-model="formData.phone"
					maxlength="11"
					@input="clearError('phone')"
				/>
			    <view v-if="error.phone" class="error-tip">{{ error.phone }}</view>
			</view>

			
			<!-- 验证码输入框 -->
			<view class="input-item">
                <span class="iconfont input-icon icon-yanzhengma"></span>
				<input 
					class="input-field" 
					type="text" 
					placeholder="请输入验证码"
					v-model="formData.code"
					maxlength="6"
					@input="clearError('code')"
				/>
				<text class="get-code-btn" :class="{disabled: codeTimer>0}" @click="getCodeEvent">
					{{ codeTimer>0 ? codeTimer+'s' : '获取验证码' }}
				</text>
				<view v-if="error.code" class="error-tip">{{ error.code }}</view>
			</view>
			
			<!-- 下一步按钮 -->
			<button class="next-btn" @click="handleNext">下一步</button>
		</view>
	</view>
</template>

<script>
import { phoneVerification, getAppEvent } from '@/utils/utils'
import { getCode, verifyPhoneCode } from '@/api/index.js'
export default {
	data() {
		return {
			pdTop: 0, // 默认顶部安全距离
			formData: {
				phone: '',
				code: ''
			},
			error: {
				phone: '',
				code: ''
			},
			codeTimer: 0,
			codeTimerId: null,
		}
	},
	mounted() {
		this.pdTop = getAppEvent('get', 'pdTop')
	},
	methods: {
		goBack() {
			uni.navigateBack();
		},
		clearError(field) {
			this.error[field] = '';
		},
		clearAllError() {
			this.error = { phone: '', code: '' };
		},
		verifyPhoneCodeEvent() {
			verifyPhoneCode({
				phone: this.formData.phone,
				code: this.formData.code
			}).then(res => {
				if (res.errno == 0) {
					this.$store.dispatch('updatePhone', this.formData.phone);
					uni.navigateTo({ url: '/pages/login/reset-password' });
				} else {
					uni.showToast({ title: res.message || '验证失败', icon: 'none' });
				}
			})
		},
		getCodeEvent() {
			if (this.codeTimer > 0) return;
			
			// 验证手机号
			const phoneTip = phoneVerification(this.formData.phone);
			if (phoneTip) {
				this.error.phone = phoneTip;
				return;
			}
			
			// 发送验证码
			getCode({
				phone: this.formData.phone
			}).then(res => {
				if (res.errno == 0) {
					uni.showToast({ title: '验证码已发送', icon: 'success' });
					this.codeTimer = 60;
					this.codeTimerId = setInterval(() => {
						this.codeTimer--;
						if (this.codeTimer <= 0) {
							clearInterval(this.codeTimerId);
							this.codeTimerId = null;
						}
					}, 1000);
				} else {
					uni.showToast({ title: res.message || '验证码发送失败', icon: 'none' });
				}
			})
		},
		
		handleNext() {
			let valid = true;
			this.clearAllError();
			
			// 手机号校验
			const phoneTip = phoneVerification(this.formData.phone);
			if (phoneTip) {
				this.error.phone = phoneTip;
				valid = false;
			}
			
			// 验证码校验
			if (!this.formData.code) {
				this.error.code = '验证码不能为空';
				valid = false;
			} else if (this.formData.code.length !== 6) {
				this.error.code = '请输入6位验证码';
				valid = false;
			}
			
			if (!valid) return;
			
			this.verifyPhoneCodeEvent();
		}
	},
	beforeDestroy() {
		if (this.codeTimerId) {
			clearInterval(this.codeTimerId);
		}
	}
}
</script>

<style lang="scss" scoped>
.forget-password-container {
	min-height: 100vh;
	background: #FFFFFF;
	padding: 0 32rpx;
}

.header-nav {
	padding-top: 26rpx;
	
	.nav-back {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}
}

.title-section {
	margin-bottom: 60rpx;
	
	.title {
		display: block;
		font-size: 48rpx;
		font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
        font-weight: 600;
        font-size: 44rpx;
        color: #333333;
        margin: 40rpx 0 8rpx
	}
	
	.subtitle {
		display: block;
		font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
        font-weight: 400;
        font-size: 24rpx;
        color: #999999;
	}
}

.form-container {
	.input-item {
        position: relative;
		display: flex;
		align-items: center;
		background: #EEFAFF;
		border-radius: 96rpx;
		padding: 0 42rpx;
        height: 96rpx;
        margin-bottom: 60rpx;
		
		.input-field {
            flex: 1;
			font-size: 28rpx;
			color: #333;
			background: transparent;
		}
        .input-icon {
			margin-right: 20rpx;
		}
		
		.get-code-btn {
			position: absolute;
			right: 32rpx;
			top: 50%;
			transform: translateY(-50%);
			color: #1890FF;
			font-size: 28rpx;
			font-weight: 500;
			cursor: pointer;
			
			&.disabled {
				color: #CCCCCC;
				pointer-events: none;
			}
		}
		
		.error-tip {
			position: absolute;
			color: #FF4D4F;
			font-size: 24rpx;
			bottom: -40rpx;
			left: 0;
			line-height: 1.5;
			font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
		}
	}
	
	.next-btn {
        width: 100%;
        height: 96rpx;
        background: #0785CF;
        box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0,0,0,0.1);
        border-radius: 60rpx 60rpx 60rpx 60rpx;
		color: #FFFFFF;
		font-size: 32rpx;
		font-weight: 600;
		border: none;
		margin-top: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		
		&:active {
			background: #0066CC;
		}
	}
}
</style>
